<template>
    <div class="container-roomDetail">
        <!-- 头部 -->
        <van-nav-bar 
        :title='roomObjDetil.roomName' 
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft">
            <template #right>
                <div @click="toUser" class="nav-img"><img src="../assets/user.png" ></div>
            </template>
        </van-nav-bar>
        <!-- 轮播 -->
        <van-swipe @change="onChange" class="room-swipe"  indicator-color="red">
            <van-swipe-item v-for="item in roombannerList" :key="item">
                <img :src="item"  preview="1" alt="" preview-text="店铺详情">
            </van-swipe-item>
            <!-- 自定义指示器 -->
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/{{roombannerList.length}}</div>
            </template>
        </van-swipe>
        <div class="content">
            <!-- 店铺信息 -->
            <div class="message m1">
                <!-- 价钱 -->
                <div class="message-hd">
                    <div class="room-prices">
                        <div class="prices-item">
                            <span>单价：</span>
                            <span class="item">{{roomObjDetil.monthlyRent ? (roomObjDetil.monthlyRent/roomObjDetil.constructionArea + 1).toFixed(0) : 0}} 元/月/㎡</span>
                        </div>
                        <div class="prices-item">
                            <span>总价：</span>
                            <span class="item">{{roomObjDetil.monthlyRent }}元/月</span>
                        </div>
                    </div>
                    <div class="room-goods">
                        <div class="view-num">{{roomObjDetil.roomViewNumber}}人浏览</div>
                        <div class="share" @click="toResigion">
                            <img src="../assets/share.png" alt="">
                            <span>客户推荐</span>
                        </div>
                        <div class="follow" @click="followIt(roomObjDetil.id)">
                            <img v-if="isCollect==1" class="like-icon" src="../assets/star.png" alt="">
                            <img v-else class="like-icon" src="../assets/empty.png" alt="">
                            <span>关注</span>
                        </div>
                    </div>
                </div>
                <!-- 独家 -->
                <div class="room-sole">
                    <div class="wrap" v-if="roomObjDetil.realEstateExclusiveAgent==1">
                        <div class="pic">
                            <img src="../assets/sole.png" alt="">
                        </div>
                        <div class="text">客户推荐（商机推荐）：仅需推荐一次，报备全部独家项目</div>
                    </div>
                    <div class="wrap" v-else>
                        <div class="text">客户推荐（商机推荐）：非独家项目每个项目须单独推荐1次</div>
                    </div>
                </div>
                <!-- 地址 -->
                <div class="room-address">{{roomObjDetil.roomName}}</div>
                <!-- 物业 -->
                <div class="room-format">
                    <div class="format-item" v-for="item in formatList" :key="item">{{item}}</div>
                </div>
            </div>
            <div class="message m2">
                <!-- 面积 -->
                <div class="room-area">
                    <span class="num">{{roomObjDetil.constructionArea}}㎡</span>
                    <span>建筑面积</span>
                </div>
                <!-- 物业类型 -->
                <div class="wuye-type">
                    <span class="num">{{roomObjDetil.realEstateType}}</span>
                    <span>物业类型</span>
                </div>
                <!-- 起租期 -->
                <div class="room-month">
                    <span class="num">{{roomObjDetil.roomMinimumRentDuration}}个月</span>
                    <span>起租期</span>
                </div>
                <!-- 免租期 -->
                <div class="free-month">
                    <span class="num">{{roomObjDetil.roomRentFreePeriod}}个月</span>
                    <span>免租期</span>
                </div>
            </div>
            <div class="message m3">
                <div class="message-text">
                    <span class="text">楼盘</span>
                    <span>{{roomObjDetil.realEstateName}}</span>
                </div>
                <div class="message-text">
                    <span class="text">地址</span>
                    <span>{{roomObjDetil.roomLocation}}</span>
                </div>
            </div>
            <!-- 店铺基本信息 -->
            <div class="floor f1">
                <div class="hd">
                    <div class="floor-title">店铺基本信息</div>
                </div>
                <div class="bd">
                    <div class="message-list">
                        <div class="message-item">
                            <div class="does">
                                <span class="text">月租</span>
                                <span class="item">{{roomObjDetil.monthlyRent}}/月</span>
                            </div>
                            <div class="does">
                                <span class="text">押付</span>
                                <span class="item">{{roomObjDetil.roomPaymentType}}</span>
                            </div>
                        </div>
                        <div class="message-item">
                            <div class="does">
                                <span class="text">经营状态</span>
                                <span class="item" v-if="roomObjDetil.realEstateRun==1">已开业</span>
                                <span class="item" v-else>未开业</span>
                            </div>
                            <div class="does">
                                <span class="text">楼层</span>
                                <span class="item">{{roomObjDetil.floorName}}</span>
                            </div>
                        </div>
                        <div class="message-item">
                            <div class="does">
                                <span class="text">楼板活载荷</span>
                                <span class="item">{{roomObjDetil.roomFloorLiveLoad}}</span>
                            </div>
                            <div class="does">
                                <span class="text">建筑面积</span>
                                <span class="item">{{roomObjDetil.constructionArea}}㎡</span>
                            </div>
                        </div>
                        <div class="message-item">
                            <div class="does">
                                <span class="text">经营类型</span>
                                <span class="item">{{roomObjDetil.realEstateType}}</span>
                            </div>
                            <div class="does">
                                <span class="text">规格</span>
                                <span class="item">
                                    面宽{{roomObjDetil.storeWidth}}
                                    、层高{{roomObjDetil.roomStoreyHeight}}
                                    、柱距{{roomObjDetil.roomColumnDistance}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 描述 -->
            <div class="floor f2">
                <div class="hd">
                    <div class="floor-title">描述</div>
                    <div class="bd">
                        <div class="message-list">
                            <div class="message-item">
                                <div class="does">
                                    <span class="text">房源亮点</span>
                                    <span class="item" v-html="roomObjDetil.roomDescription"></span>
                                </div>
                                <div class="does">
                                    <span class="text">周边客源</span>
                                    <span class="item" v-if="roomObjDetil.surroundingCustomers">
                                       {{roomObjDetil.surroundingCustomers}}
                                    </span>
                                    <span v-else>暂无</span>
                                </div>
                            </div>
                            <div class="message-item">
                                <div class="does">
                                    <span class="text">适合行业</span>
                                    <span class="item">{{roomObjDetil.roomIndustry}}</span>
                                </div>
                                <div class="does">
                                    <span class="text">周边客源</span>
                                    <span class="item" v-if="roomObjDetil.surroundingCustomers">
                                       {{roomObjDetil.surroundingCustomers}}
                                    </span>
                                    <span v-else>暂无</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 位置及周边 -->
            <div class="floor f3">
                <div class="hd">
                    <div class="floor-title">位置及周边</div>
                </div>
                <div class="bd">
                    <!-- map地图  &&&& 生活周边配套-->
                    <baidu-map class="bm-view" 
                        @click="to_mapDetail"
                        :center="{lng: roomlongitude, lat: roomlatitude}" 
                        :zoom="16"
                        :scroll-wheel-zoom="true" 
                        :ak="YOUR_APP_KEY">
                        <!-- 中心地标 -->
                        <!-- 中心地标 -->
                        <bm-marker :icon="{url:'/static/address-logo2.png', size: {width: 22, height: 28}}" :position="{lng: roomlongitude, lat: roomlatitude}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                            <bm-label :content="roomObjDetil.roomName" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
                        </bm-marker>
                        <!-- <bm-marker
                             :icon="{url:imgUrl, size: {width: 22, height: 28}}"
                             :position="{lng: roomlongitude, lat: roomlatitude}">
                            <bm-info-window class="info-window"  :show="true" :closeOnClick="false" :width="0" :height="0">
                                <div class="address-name" @click="to_mapDetail"></div>
                            </bm-info-window>
                            <bm-label
                             class="bm-label" 
                             :content="roomObjDetil.roomName" 
                             :labelStyle="{color: '#FFA740', fontSize : '0.14rem'}" 
                             :offset="{width: -70, height: 30}">
                            </bm-label>
                        </bm-marker> -->
                    </baidu-map>
                </div>
            </div>
            <!-- 物业配套 -->
            <div class="floor f4">
                <div class="hd">
                    <div class="floor-title">配套</div>
                </div>
                <div class="bd">
                    <div class="wuye-list">
                        <div class="wuye-item" v-for="item in roomwuyeList" :key="item.id">
                            <div class="pic">
                                <img v-if="item.value" src="../assets/select.png" alt="">
                                <img v-else src="../assets/disselect.png" alt="">
                            </div>
                            <div class="wuye-name">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <foot-message></foot-message>
    </div>
</template>
<script>
import { mapState,mapActions} from 'vuex';
import FootMessage from '@/components/foot-message/index.vue'
import {selectroomDetail} from "@/api/roomDetail"
import {roomdetailNeigborhood} from "@/api/map"
import{follwRoom,isfollow,delfollow}from "@/api/user"
import {BmMarker,BmInfoWindow,BmLabel} from 'vue-baidu-map';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
    components:{
        BmMarker,
        BaiduMap,
        BmInfoWindow,
        BmLabel,
        FootMessage
    },
    data(){
        return{
            // 店铺详情
            roomObjDetil:{},
            // 店铺图片数组
            roombannerList:[],
            // 轮播图的自定义指示器
            current:0,
            // 店铺经纬度
            roomlongitude:null,
            roomlatitude:null,
            // 百度地图key
            YOUR_APP_KEY:'DHHgQLPu0a2e4rY7ORxUiPpChQ9RLsdy',
            // 是否收藏
            isCollect:null,
            // 店铺物业条件数组
            formatList:[],
            roomwuyeList:[
                {name:"网络",id:0,value:false},
                {name:"暖气",id:1,value:false},
                {name:"燃气",id:2,value:false},
                {name:"上下水",id:3,value:false},
                {name:"可明火",id:4,value:false},
                {name:"排烟",id:5,value:false},
                {name:"排污",id:6,value:false},
                {name:"管煤",id:7,value:false},
                {name:"停车位",id:8,value:false},
                {name:"380V供电",id:9,value:false},
                {name:"扶梯",id:10,value:false},
                {name:"货梯",id:11,value:false},
                {name:"客梯",id:12,value:false},
                {name:"中央空调",id:13,value:false},
                {name:"外摆区",id:14,value:false},
                {name:"220V供电",id:15,value:false},
                {name:"排油烟",id:16,value:false},
            ],
            imgUrl:''
        }
    },
    computed:{
        ...mapState(["userInfo","turnOpen"])
    },
    created(){
        this.loadData()
        console.log(this.turnOpen)
    },
    methods:{
        ...mapActions(["saveRouter"]),
        // 初始数据
        loadData(){
            // 店铺详情
            selectroomDetail('/real/estate/room/get/'+this.$route.query.roomId).then(res=>{
                console.log(res)
                // this.$nextTick(()=>{
                //     this.$previewRefresh()
                // })
                this.roomObjDetil=res
                // 改造数组
                let formatList=res.roomPropertyConditions.replace('[', '').replace(']', '').split(",");
                let roombannerList=res.roomBannerPicture.replace('[', '').replace(']', '').split(",");
                
                // 再将改造后的数组，添加到res.records里面
                res.roomPropertyConditionsFormat = formatList;
                res.roombannerList = roombannerList;
                res.roomIndustry=res.roomIndustry.replace('[', '').replace(']', '')
                // 最后赋值到data
                this.roombannerList=roombannerList
                this.formatList=formatList

                // 店铺经纬度赋值
                this.bd_decrypt(Number(res.roomLocationLng),Number(res.roomLocationLat))
                // this.roomlongitude=Number(res.roomLocationLng)
                // this.roomlatitude=Number(res.roomLocationLat)

                // 对物业条件进行判断（判断当前店铺满足哪些物业条件）
                for(let i in res.roomPropertyConditionsFormat){
                    for(let k in this.roomwuyeList){
                        if(formatList[i]==this.roomwuyeList[k].name){
                            this.roomwuyeList[k].value=true
                            console.log(this.roomwuyeList)
                        }
                    }
                }
                this.Neigborhoodmessage()
                if(this.userInfo.salesManNickName){
                    isfollow(res.id).then(res=>{
                        console.log(res)
                        this.isCollect=res
                    })
                 }else{
                     this.$toast.fail("请登陆")
                }
                // 分享
                var ua = window.navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == 'micromessenger'){
                    var dataForWeixin={
                        title:res.roomName+"【躺猪网】超值好铺抢租中",
                        imgUrl:res.roombannerList[0],
                        link:window.location.href,
                        desc:"好铺好服务 找铺上躺猪"
                    }
                    this.$share.getJSSDK(dataForWeixin)
                }
            })
        },
        // 腾讯转百度地图
        bd_decrypt(lng, lat) {
            if (lng == null || lng == '' || lat == null || lat == '')
            return [lng, lat];

            var x_pi = 3.14159265358979324;
            var x = parseFloat(lng);
            var y = parseFloat(lat);
            var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
            var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
            var lng = (z * Math.cos(theta) + 0.0065).toFixed(5);
            var lat = (z * Math.sin(theta) + 0.006).toFixed(5);
            this.roomlongitude=lng
            this.roomlatitude=lat 
        },
        // 轮播图切换
        onChange(index){
            // console.log(index)
            this.current=index
        },
        // 返回上一页面
        onClickLeft(){
            if(this.turnOpen==0){
                this.$router.go(-1);
            }else{
                this.$router.push({path:'/home'})
                this.saveRouter(0)
            }
        },
        // 去用户信息
		toUser(){
			this.$router.push({path:"/user"})
		},
        // 去注册
        toResigion(){
            this.$router.push({path:'/resigion'})
        },
        // 店铺周边配套信息
        Neigborhoodmessage(){
            roomdetailNeigborhood({
                query:"地铁",
                region:"长沙",
                location:this.roomlatitude+','+this.roomlongitude,
                ak:"DHHgQLPu0a2e4rY7ORxUiPpChQ9RLsdy",
                output:"json",
                radius:"800",
                scope:"2"
            }).then(res=>{
                console.log(res)
            })
        },
        // 去地图详情
        to_mapDetail(){
            this.$router.push({path:"/detail",query:{lng:this.roomlongitude,lat:this.roomlatitude}})
        },
        // 关注店铺
        followIt(id){
            if(this.userInfo.salesManNickName){
                if(this.isCollect==1){
                delfollow(this.roomObjDetil.id).then(res=>{
                    console.log(res)
                    this.isCollect=null
                    this.$forceUpdate()
                })
                return
                }else{
                    follwRoom(id).then(res=>{
                        console.log(res)
                        this.$toast.success("关注成功")
                        this.isCollect=1
                        this.$forceUpdate()
                    })
                }
            }else{
                this.$toast.fail("请先登陆")
            }
        },
    }
}
</script>

<style lang="less" scoped>
/// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.39rem;
		height: 0.39rem;
	}
}
// 轮播样式
.van-swipe{
    height: 5.65rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 0.28rem;
    background: rgba(0, 0, 0, 0.3);
}
// 主要内容
.content{
    padding: 0 0.35rem;
}
// 店铺信息
.message{
    border-bottom: 1px solid #eee;
    padding-bottom: 0.2rem;
    padding-left: 0.15rem;
}
.message.m2{
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    display: flex;
    font-size: 0.24rem;
    justify-content: space-around;
    color: #999;
    span{
        margin-top: 3px;
    }
    div{
        margin-right: 0.15rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .num{
            font-weight: 600;
            font-size: 0.28rem;
            color: #222;
        }
    }
}
.message.m3{
    padding-top: 0.2rem;
    .message-text{
        display: flex;
        font-size: 0.24rem;
        margin-top: 0.17rem;
        .text{
            color: #999;
            letter-spacing: 0.2rem;
            margin-right: 0.2rem;
        }
    }

}
.message-hd{
    display: flex;
    margin-top: 0.2rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.28rem;
    color: #666666;
    .room-prices{
        .prices-item{
            margin-bottom: 0.1rem;
        }
        .item{
            font-size: 0.28rem;
            font-weight: 600;
            color: #EA4800;
        }
    }
    .room-goods{
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 0.24rem;
        color: #999;
        img{
            width: 0.35rem;
            height: 0.35rem;
            margin-right: 0.1rem;
        }
        div{
            margin-right: 0.2rem;
            display: flex;
            align-items: center;
        }
    }
}
.room-sole{
    font-size: 0.24rem;
    img{
        width: 1.33rem;
        height: 0.33rem;
    }
    div{
        margin: 0.1rem 0;
    }
}
.room-address{
    font-size: 0.36rem;
    font-weight: 600;
    color: #222;
}
// 店铺基本信息
.message-item{
    .does{
        margin-top: 0.2rem;
        display: flex;
        margin-right: 0.9rem;
        align-items: center;
    }
    font-size: 0.24rem;
    .text{
        width: 1.7rem;
        color: #999;
    }
    .item{
        color: #222;
        flex: 1;
    }
}
// 物业
.room-format{
    display: flex;
    margin-top: 0.1rem;
    .format-item{
        margin-right: 0.2rem;
        padding: 2px 4px;
        font-size: 0.2rem;
        font-weight: 600;
        color: #FFA740;
        background: #FFF5EA;
    }
}
.floor{
    .floor-title{
        font-size: 0.32rem;
        padding: 0.3rem 0;
        font-weight: 600;
        border-bottom: 1px solid #eee;
    }
}
.floor.f4{
    padding-bottom: 1.5rem;
}
// 地图组件样式
.bm-view{
    height:3rem ;
}
.address-name{
    font-size: 0.14rem;
}
/deep/.BMapLabel{
    left: 50%!important;
    top: 50%!important;
    transform: translate(-40%,-150%);
    font-size: 0.24rem!important;
    // border: 1px solid #FFA740!important;

}
/deep/.BMap_Marker::before{
    content: " ";
    position: absolute;
    bottom:6px;
    border-top: .1rem solid red;
    border-left: .1rem solid transparent;
    border-right: .1rem solid transparent;
    width: 0;
    height: 0;
    left: 50%;
    // transform: translate(-50%,0);
    transform: translateX(-50%);
    -webkit-transform: translateX(50%);
}
/deep/.BMap_Marker.BMap_noprint::before{
    display: none;
}

// 店铺物业配套
.wuye-list{
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.2rem;
    .wuye-item{
        font-size: 0.24rem;
        width: 25%;
        align-items: center;
        display: flex;
        margin-top: 0.2rem;
        justify-content: center;
        .pic{
            width: 0.3rem;
            height: 0.3rem;
            display: flex;
            justify-content: center;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .wuye-name{
            flex: 1;
            display: flex;
            justify-content: center;
        }
    }
}
</style>